<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="yes" name="apple-touch-fullscreen">
    <title>手机投屏</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rem750.js"></script>
    <script type="text/javascript">
        /* <![CDATA[  */
        testSupportWebsocket();
        $(function(){
            $(".clearfix li input").focus(function(){
//                $(this).parent().addClass("current");
            });
            $(".clearfix li input").blur(function(){
//                $(this).parent().removeClass("current");
            });
            $(".clearfix li input").keydown(function(){
                return false;
            });
            $(".clearfix li input").keyup(validateInput);
            $(".clearfix li input").keypress(function(){
                return false;
            });

            $(".clearfix li input[codeIndex='1']").focus();
        });

        function validateInput(e){
            var keyCode=parseInt(e.keyCode);//console.log("keyCode="+keyCode);
            if(keyCode==8){//退格键
                var codeIndex=parseInt($(this).attr("codeIndex"));
                $(".clearfix li input[codeIndex='"+codeIndex+"']").val("");
                if(codeIndex>1){
                    $(".clearfix li input[codeIndex='"+(codeIndex-1)+"']").focus();
                }
                return false;
            }else if((keyCode>=48&&keyCode<=57)||(keyCode>=96&&keyCode<=105)){
                var input=this;
                var number=keyCode>57?(keyCode-96):(keyCode-48);//兼容小键盘数字键
                var codeIndex=parseInt($(this).attr("codeIndex"));
                setTimeout(function(){
                    $(input).val(number);
                    if(codeIndex<4){
                        $(".clearfix li input[codeIndex='"+(codeIndex+1)+"']").focus();
                    }else{
                        $(".clearfix li input[codeIndex='"+codeIndex+"']").blur();
                        commitCode();
                    }
                },0);
            }else if(keyCode==229){//部分中文输入法的占位符
                var s=$(this).val();
                s=s.replace(/[^\d]/g,'');
                if(s.length>1){
                    s=s.substring(0,1);
                }
                if(s.length>0){
                    $(this).val(s);
                    var codeIndex=parseInt($(this).attr("codeIndex"));
                    if(codeIndex<4){
                        $(".clearfix li input[codeIndex='"+(codeIndex+1)+"']").focus();
                    }else{
                        $(".clearfix li input[codeIndex='"+codeIndex+"']").blur();
                        commitCode();
                    }
                }else{
                    $(this).val('');
                }
            }else if(keyCode==116){//F5刷新
                location.reload();
            }else{
                console.log("输入无效 keyCode="+keyCode);
                return false;
            }
        }

        function commitCode(){
            var connectCode="";
            connectCode=connectCode+$(".clearfix li input[codeIndex='1']").val();
            connectCode=connectCode+$(".clearfix li input[codeIndex='2']").val();
            connectCode=connectCode+$(".clearfix li input[codeIndex='3']").val();
            connectCode=connectCode+$(".clearfix li input[codeIndex='4']").val();
            if(connectCode.length<4){
                $("#errormsg").text("投屏码无效");
            }else{
                $("#connectCode").val(connectCode);
                validateCode(connectCode);
            }
        }

        //校验投屏码
        function validateCode(code){
            var url="/apis/toScreen/isCodeValid?connectCode="+code;
            $.ajax({
                url: url,
                type: "get",
                dataType:"json",
                success:function(json){//alert(JSON.stringify(json));
                    if(json.result==1){
                        if(json.data==1){
                            document.forms[0].submit();
                        }else{
                            $("#connectCode").val("");
                            $(".clearfix li input").val("");
                            $(".clearfix li input[codeIndex='1']").focus();
                            $("#errormsg").text("投屏码无效");
                        }
                    }else{
                        $("#errormsg").text(json.errorMsg);
                    }
                }
            });
        }

        /**
         * 检测浏览器是否支持websocket
         */
        function testSupportWebsocket() {
            if(typeof(window.WebSocket)!="function"){//不支持websocket
                if(typeof (navigator.vendor)!="undefined"){
                    if(navigator.vendor.indexOf("Apple")>-1) {//为safari浏览器  仅能判断是否是Safari浏览器
                        window.location.href="http://x.chaoxing.com/notSupportWebsocket?webBrowserType=1";
                    }else {
                        window.location.href="http://x.chaoxing.com/notSupportWebsocket?webBrowserType=0";
                    }
                }else {
                    window.location.href="http://x.chaoxing.com/notSupportWebsocket?webBrowserType=0";
                }

            }
        }
    </script>
</head>
<body>
    <div class="codes_box">
        <h2 class="input_title_h2">请输入手机上的投屏码</h2>
        <div class="input_size">
            <ul class="clearfix">
                <li><input type="text" codeIndex="1"/></li>
                <li><input type="text" codeIndex="2"/></li>
                <li><input type="text" codeIndex="3"/></li>
                <li><input type="text" codeIndex="4"/></li>
            </ul>
        </div>
        <div class="codes_error">
            <div id="errormsg">&nbsp;</div>
            <!-- 显示隐藏此div -->
        </div>
    </div>

    <iframe src="http://x.chaoxing.com/" frameborder="0" id="myFrame"></iframe>

</body>
</html>
